<template>
  <a @click="dialog = true">
    <span>明细</span>
    <a-modal v-model="dialog" title="明细" @ok="submit" :width="1000">
      <!-- <p class="left-1">总金额：{{ total }}</p> -->
      <a-table rowKey="index" :columns="columns" :data-source="data" :pagination="pagination">
        <span slot="date" slot-scope="date"> {{ humanizeDate(date) }}</span>
        <span slot="calcDate" slot-scope="calcDate"> {{ humanizeDate(calcDate) }}</span>
        <span slot="operation" slot-scope="_, record">
          <a @click="toDetail(record)">查看</a>
        </span>
      </a-table>
    </a-modal>
  </a>
</template>
<script>
import moment from 'moment'
import { getWithdraw } from '@/api/common'
const columns = [
  {
    title: '编号',
    dataIndex: 'projectNum',
    key: 'projectNum'
  },
  {
    title: '客户',
    dataIndex: 'clientName',
    key: 'clientName'
  },
  {
    title: '项目名称',
    dataIndex: 'addr',
    key: 'addr'
  },
  {
    title: '阶段',
    dataIndex: 'stage',
    key: 'stage'
  },
  {
    title: '律师',
    dataIndex: 'lawyerName',
    key: 'lawyerName'
  },
  {
    title: '提款日期',
    dataIndex: 'date',
    key: 'date',
    scopedSlots: { customRender: 'date' }
  },
  {
    title: '计算日期',
    dataIndex: 'calcDate',
    key: 'calcDate',
    scopedSlots: { customRender: 'calcDate' }
  },
  {
    title: '货币',
    dataIndex: 'currency',
    key: 'currency'
  },
  {
    title: '性质',
    dataIndex: 'nature',
    key: 'nature',
    scopedSlots: { customRender: 'nature' }
  },
  {
    title: '金额',
    dataIndex: 'amount',
    key: 'amount'
  }
  // {
  //   title: '操作',
  //   dataIndex: 'operation',
  //   key: 'operation',
  //   scopedSlots: { customRender: 'operation' }
  // }
]
export default {
  name: 'detail',
  props: ['record'],
  data() {
    return {
      total: '',
      dialog: false,
      form: {
        data: ''
      },

      data: [],
      pagination: {
        total: 1,
        pageSize: 10,
        onChange: this.getData
      }
    }
  },
  computed: {
    columns() {
      if (this.$auth('manageFund.get')) {
        return [
          ...columns,
          {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            scopedSlots: { customRender: 'operation' }
          }
        ]
      } else {
        return columns
      }
    }
  },
  watch: {
    dialog(v) {
      if (this.dialog) {
        this.getData()
      }
    }
  },
  methods: {
    submit() {
      this.dialog = false
    },
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    toDetail(record) {
      this.$router.push({ name: 'manage/detail', query: { id: record.projectId } })
    },
    async getData(page = 1) {
      const _form = {
        page,
        limit: this.pagination.pageSize,
        arrangeId: this.record.id
      }
      if (this.keyWord) {
        _form.keyWord = this.keyWord
      }
      const res = await getWithdraw(_form)
      const data = res.result.data
      this.pagination.total = data.total
      this.data = data.list.map((el, i) => {
        el.index = i
        return el
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
